<template>
  <view class="container">
    <!-- 访客通行类型选择 -->
    <view class="access-type-section">
      <view class="type-tabs">
        <view class="tab-item" 
              :class="{ active: activeTab === 'qrcode' }"
              @tap="switchTab('qrcode')">
          <text>一次性通行码</text>
        </view>
        <view class="tab-item" 
              :class="{ active: activeTab === 'period' }"
              @tap="switchTab('period')">
          <text>时段性通行</text>
        </view>
      </view>
      
      <!-- 一次性通行码 -->
      <view class="tab-content" v-if="activeTab === 'qrcode'">
        <view class="qrcode-section">
          <view class="qrcode-wrapper">
            <image v-if="qrCodeUrl" :src="qrCodeUrl" class="qrcode-image"></image>
            <view v-else class="qrcode-placeholder">
              <text class="placeholder-text">点击生成访客码</text>
            </view>
          </view>
          <view class="qrcode-info" v-if="qrCodeUrl">
            <view class="info-item">
              <text class="info-label">有效期</text>
              <text class="info-value">{{ qrCodeExpireTime }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">访客码</text>
              <text class="info-value code">{{ visitorCode }}</text>
            </view>
          </view>
        </view>
        
        <view class="action-buttons">
          <button class="action-btn generate" @tap="generateQRCode">
            <text class="iconfont icon-refresh"></text>
            <text>{{ qrCodeUrl ? '重新生成' : '生成访客码' }}</text>
          </button>
        </view>
        
        <view class="tips-section">
          <view class="tips-title">
            <text class="iconfont icon-info"></text>
            <text>使用说明</text>
          </view>
          <view class="tips-content">
            <text class="tip-item">• 访客码有效期为24小时</text>
            <text class="tip-item">• 访客可凭二维码或6位数字码通行</text>
            <text class="tip-item">• 每个访客码仅限使用一次</text>
            <text class="tip-item">• 生成新的访客码后，旧码将自动失效</text>
          </view>
        </view>
      </view>
      
      <!-- 时段性通行 -->
      <view class="tab-content" v-if="activeTab === 'period'">
        <view class="form-section">
          <view class="form-item">
            <text class="form-label">访客姓名</text>
            <input class="form-input" v-model="periodForm.name" placeholder="请输入访客姓名" />
          </view>
          <view class="form-item">
            <text class="form-label">手机号码</text>
            <input class="form-input" v-model="periodForm.phone" placeholder="请输入访客手机号" type="number" maxlength="11" />
          </view>
          <view class="form-item">
            <text class="form-label">来访事由</text>
            <picker class="form-picker" :range="reasonOptions" @change="handleReasonChange">
              <view class="picker-value">{{ periodForm.reason || '请选择来访事由' }}</view>
            </picker>
          </view>
          <view class="form-item date-range">
            <text class="form-label">有效时段</text>
            <view class="date-picker-group">
              <picker class="date-picker" mode="date" :value="periodForm.startDate" @change="handleStartDateChange">
                <view class="picker-value">{{ periodForm.startDate || '开始日期' }}</view>
              </picker>
              <text class="date-separator">至</text>
              <picker class="date-picker" mode="date" :value="periodForm.endDate" @change="handleEndDateChange">
                <view class="picker-value">{{ periodForm.endDate || '结束日期' }}</view>
              </picker>
            </view>
          </view>
        </view>
        
        <view class="action-buttons">
          <button class="action-btn generate" @tap="generatePeriodAccess">
            <text class="iconfont icon-check"></text>
            <text>生成时段通行</text>
          </button>
        </view>
        
        <view class="tips-section">
          <view class="tips-title">
            <text class="iconfont icon-info"></text>
            <text>使用说明</text>
          </view>
          <view class="tips-content">
            <text class="tip-item">• 时段通行最长可设置7天</text>
            <text class="tip-item">• 访客将收到短信通知，凭手机号和验证码通行</text>
            <text class="tip-item">• 每个访客每天可通行多次</text>
            <text class="tip-item">• 过期后自动失效，需重新申请</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 访客记录 -->
    <view class="visitor-records">
      <view class="section-header">
        <text class="section-title">访客记录</text>
        <!-- <text class="more-link" @tap="viewAllRecords">查看全部</text> -->
      </view>
      
      <view v-if="visitorRecords.length === 0" class="empty-state">
        <image src="/static/icons/empty-record.png" class="empty-icon"></image>
        <text class="empty-text">暂无访客记录</text>
      </view>
      
      <view v-else class="record-list">
        <view class="record-item" v-for="(record, index) in visitorRecords" :key="index">
          <view class="record-left">
            <view class="visitor-avatar" :style="{ backgroundColor: getAvatarColor(record.name) }">
              {{ record.name.substring(0, 1) }}
            </view>
            <view class="record-info">
              <view class="record-name-row">
                <text class="visitor-name">{{ record.name }}</text>
                <text class="record-type" :class="{ 'type-period': record.type === '时段通行' }">
                  {{ record.type }}
                </text>
              </view>
              <text class="record-time">{{ record.time }}</text>
            </view>
          </view>
          <view class="record-status" :class="{ 'status-used': record.status === '已使用', 
                                               'status-expired': record.status === '已过期' }">
            {{ record.status }}
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'qrcode',
      qrCodeUrl: '',
      visitorCode: '',
      qrCodeExpireTime: '',
      showShareModal: false,
      periodForm: {
        name: '',
        phone: '',
        reason: '',
        startDate: '',
        endDate: ''
      },
      reasonOptions: ['探亲访友', '快递配送', '家政服务', '装修维修', '其他'],
      visitorRecords: [
        {
          id: 1,
          name: '刘伟',
          type: '一次性通行',
          time: '2025-03-12 14:30',
          status: '已使用'
        },
        {
          id: 2,
          name: '张丽华',
          type: '时段通行',
          time: '2025-03-11 至 2025-03-18',
          status: '使用中'
        },
        {
          id: 3,
          name: '王师傅',
          type: '一次性通行',
          time: '2025-03-10 09:15',
          status: '已过期'
        }
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    generateQRCode() {
      // 模拟生成二维码
      setTimeout(() => {
        this.qrCodeUrl = '/static/image/qrcode.png'; // 实际项目中应该是后端生成的二维码
        this.visitorCode = Math.floor(100000 + Math.random() * 900000).toString(); // 生成6位随机数
        
        // 设置过期时间为24小时后
        const expireDate = new Date();
        expireDate.setHours(expireDate.getHours() + 24);
        this.qrCodeExpireTime = `${expireDate.getFullYear()}-${String(expireDate.getMonth() + 1).padStart(2, '0')}-${String(expireDate.getDate()).padStart(2, '0')} ${String(expireDate.getHours()).padStart(2, '0')}:${String(expireDate.getMinutes()).padStart(2, '0')}`;
        
        uni.showToast({
          title: '访客码生成成功',
          icon: 'success'
        });
      }, 1000);
    },
    shareQRCode() {
      this.showShareModal = true;
    },
    hideShareModal() {
      this.showShareModal = false;
    },
    saveQRCode() {
      uni.showToast({
        title: '二维码已保存到相册',
        icon: 'success'
      });
      this.hideShareModal();
    },
    handleReasonChange(e) {
      this.periodForm.reason = this.reasonOptions[e.detail.value];
    },
    handleStartDateChange(e) {
      this.periodForm.startDate = e.detail.value;
    },
    handleEndDateChange(e) {
      this.periodForm.endDate = e.detail.value;
    },
    generatePeriodAccess() {
      // 表单验证
      if (!this.periodForm.name) {
        return uni.showToast({
          title: '请输入访客姓名',
          icon: 'none'
        });
      }
      if (!this.periodForm.phone || !/^1\d{10}$/.test(this.periodForm.phone)) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
      }
      if (!this.periodForm.reason) {
        return uni.showToast({
          title: '请选择来访事由',
          icon: 'none'
        });
      }
      if (!this.periodForm.startDate || !this.periodForm.endDate) {
        return uni.showToast({
          title: '请选择有效时段',
          icon: 'none'
        });
      }
      
      // 检查日期范围
      const startDate = new Date(this.periodForm.startDate);
      const endDate = new Date(this.periodForm.endDate);
      const diffDays = Math.floor((endDate - startDate) / (24 * 60 * 60 * 1000));
      
      if (endDate < startDate) {
        return uni.showToast({
          title: '结束日期不能早于开始日期',
          icon: 'none'
        });
      }
      
      if (diffDays > 7) {
        return uni.showToast({
          title: '时段通行最长为7天',
          icon: 'none'
        });
      }
      
      // 模拟提交
      uni.showLoading({
        title: '正在生成...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '时段通行已生成',
          icon: 'success'
        });
        
        // 添加到访客记录
        this.visitorRecords.unshift({
          id: Date.now(),
          name: this.periodForm.name,
          type: '时段通行',
          time: `${this.periodForm.startDate} 至 ${this.periodForm.endDate}`,
          status: '使用中'
        });
        
        // 重置表单
        this.periodForm = {
          name: '',
          phone: '',
          reason: '',
          startDate: '',
          endDate: ''
        };
      }, 1500);
    },
    viewAllRecords() {
      uni.navigateTo({
        url: '/pages/property/visitor-records'
      });
    },
    getAvatarColor(name) {
      const colors = [
        '#6a11cb', '#2575fc', '#ff9500', '#ff5e3a', 
        '#34c759', '#007aff', '#5856d6', '#af52de'
      ];
      const index = name.charCodeAt(0) % colors.length;
      return colors[index];
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding: 30rpx 30rpx 50rpx;
}

.access-type-section {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
  
  .type-tabs {
    display: flex;
    border-bottom: 1rpx solid #f0f0f0;
    
    .tab-item {
      flex: 1;
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      color: #666;
      position: relative;
      
      &.active {
        color: #6a11cb;
        font-weight: 500;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background: linear-gradient(to right, #6a11cb, #2575fc);
          border-radius: 3rpx;
        }
      }
    }
  }
  
  .tab-content {
    padding: 30rpx;
  }
  
  .qrcode-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
    
    .qrcode-wrapper {
      width: 400rpx;
      height: 400rpx;
      background-color: #fff;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      overflow: hidden;
      
      .qrcode-image {
        width: 100%;
        height: 100%;
      }
      
      .qrcode-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f7fa;
        
        .placeholder-text {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    .qrcode-info {
      width: 100%;
      
      .info-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16rpx;
        
        .info-label {
          font-size: 28rpx;
          color: #666;
          margin-right: 20rpx;
        }
        
        .info-value {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          
          &.code {
            font-size: 36rpx;
            color: #6a11cb;
            letter-spacing: 2rpx;
          }
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      padding: 0 40rpx;
      margin: 0 15rpx;
      
      .iconfont {
        margin-right: 10rpx;
        font-size: 32rpx;
      }
      
      &.generate {
        background: linear-gradient(to right, #6a11cb, #2575fc);
        color: #fff;
        box-shadow: 0 4rpx 10rpx rgba(106, 17, 203, 0.2);
      }
      
      &.share {
        background-color: #f5f7fa;
        color: #6a11cb;
        border: 1rpx solid #e0e0e0;
      }
    }
  }
  
  .tips-section {
    background-color: #f8f9fc;
    border-radius: 12rpx;
    padding: 20rpx;
    
    .tips-title {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .iconfont {
        color: #6a11cb;
        font-size: 28rpx;
        margin-right: 10rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .tips-content {
      .tip-item {
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
        display: block;
      }
    }
  }
  
  .form-section {
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .form-input {
        width: 100%;
        height: 80rpx;
        background-color: #f5f7fa;
        border-radius: 12rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      .form-picker {
        width: 100%;
        height: 80rpx;
        background-color: #f5f7fa;
        border-radius: 12rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        
        .picker-value {
          font-size: 28rpx;
          color: #333;
        }
      }
      
      &.date-range {
        .date-picker-group {
          display: flex;
          align-items: center;
          
          .date-picker {
            flex: 1;
            height: 80rpx;
            background-color: #f5f7fa;
            border-radius: 12rpx;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            
            .picker-value {
              font-size: 28rpx;
              color: #333;
            }
          }
          
          .date-separator {
            margin: 0 20rpx;
            color: #999;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}

.visitor-records {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background: #6a11cb;
        border-radius: 3rpx;
      }
    }
    
    .more-link {
      font-size: 26rpx;
      color: #6a11cb;
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    
    .empty-icon {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 20rpx;
      opacity: 0.7;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .record-list {
    padding: 0 30rpx;
    
    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-left {
        display: flex;
        align-items: center;
        
        .visitor-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 20rpx;
        }
        
        .record-info {
          .record-name-row {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            
            .visitor-name {
              font-size: 30rpx;
              color: #333;
              font-weight: 500;
              margin-right: 16rpx;
            }
            
            .record-type {
              font-size: 22rpx;
              color: #fff;
              background-color: #ff9500;
              padding: 2rpx 10rpx;
              border-radius: 10rpx;
              
              &.type-period {
                background-color: #007aff;
              }
            }
          }
          
          .record-time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .record-status {
        font-size: 26rpx;
        color: #34c759;
        
        &.status-used {
          color: #999;
        }
        
        &.status-expired {
          color: #ff3b30;
        }
      }
    }
  }
}
</style> 